<template>
  <view class="u-flex u-flex-col" style="height: 100%">
    <view class="flex-1 u-p-20 " style="width: 100%;">
      <u-form :model="form" ref="uForm" label-width="180">
        <u-form-item label="收货人"><u-input v-model="form.consignee"  placeholder="请输入收货人姓名"/></u-form-item>
        <u-form-item label="联系电话"><u-input v-model="form.phone" type="number" placeholder="请输入电话号码"/></u-form-item>
        <!--<u-form-item label="所在地区">
          <view class="u-flex">
            <view class="item flex-1 u-text-center" @click="open('province')">{{province || '省'}}</view>
            <view class="item flex-1 u-text-center" @click="open('city')">{{city || '市' }}</view>
            <view class="item flex-1 u-text-center" @click="open('district')">{{district || '区' }}</view>
          </view>
        </u-form-item>
        <u-form-item label="街道">
          <view @click="open('street')">
            {{street||'点击选择'}}
          </view>
        </u-form-item>-->
        <u-form-item label="所在地区" right-icon="arrow-right">
          <view @click="show = true">{{(showData) || '点击选择'}}</view>
          <u-picker mode="region" v-model="show"  :default-selector="[0]"
                    :default-region="default_region"
                    @confirm="confirm"></u-picker>
        </u-form-item>
        <u-form-item label="详细地址"><u-input v-model="form.address" placeholder="请输入详细地址"/></u-form-item>
        <u-form-item label="设为默认地址">
          <view class="u-flex" style="justify-content: flex-end">
            <u-switch v-model="isdefault"></u-switch>
          </view>
        </u-form-item>
      </u-form>
      <view class="u-p-t-40 u-p-b-30" style="color: red" @click="delAddress" v-if="showDel">删除该地址</view>
    </view>
    <!--<u-select v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select>-->
    <view class="bottom u-p-20" style="width: 100%">
      <u-button type="primary" :custom-style="customStyle" shape="circle" @click="save">保存</u-button>
    </view>
  </view>
</template>

<script>
  import {request} from "../../util/api";
  import {CHECK_PHONE, TOAST} from "../../util/util";

  export default {
    data() {
      return {
        show: false,
        list: [],
        form: {
          params: {},
          isDefault: 0
        },
        street: '',
        province: '',
        city: '',
        district: '',
        customStyle: {
          background: '#1f476d',
          padding: '0 30rpx',
          color: '#fff'
        },
        showData: '',
        isdefault: false,
        default_region: [],
        showDel: false
      }
    },

    mounted() {
      //this.getProvince()
    },

    onLoad(option) {
      if (option.id) {
        this.getDetail(option.id)
        this.showDel = true
      }
    },

    methods: {
      open(type) {
        this.show = true
        switch (type) {
          case 'province':

        }
      },

      confirm(res) {
        this.province = res.province.label
        this.city = res.city.label
        this.district = res.area.label
        this.showData = `${res.province.label}/${res.city.label}/${res.area.label}`
        this.form.params = res
      },

      getProvince() {
        request({
          url: '/system/wx/get/allXzqh',
          token: true
        }).then(res => {
          console.log(res)
        })
      },

      save() {
        if (!this.form.consignee || !this.form.phone || !this.showData || !this.form.address) {
          TOAST('请完善信息再提交！')
          return
        }
        if (!CHECK_PHONE(this.form.phone)) {
          TOAST('请输入正确的手机号！')
          return
        }
        this.form.province = this.province
        this.form.street = this.city
        this.form.district = this.district
        this.form.isDefault = Number(this.isdefault)
        request({
          url: '/wx/CompassUserAddress/add',
          method: 'post',
          data: this.form
        }).then(res => {
          uni.navigateBack();
        })
      },

      getDetail(id) {
        request({
          url: '/system/CompassUserAddress/' + id
        }).then(res => {
          this.form = res.data
          let {province, street, district} = res.data
          this.province = province
          this.city = street
          this.district = district
          this.showData = `${province}/${street}/${district}`
          this.default_region = [province, street, district]
          this.isdefault = Boolean(this.form.isDefault)
        })
      },

      delAddress() {
        let _this = this
        uni.showModal({
          title: '提示',
          content: '确定删除吗？',
          success: function (res) {
            if (res.confirm) {
              request({
                url: '/wx/wxDelCompassUserAddress/' +  _this.form.id,
                data: {id: _this.form.id},
                method: 'post'
              }).then(response => {
                TOAST('删除成功！')
                uni.navigateBack();
              })
            }
          }
        })
      }
    },

    watch: {
      /*province(newVal) {
        this.city = ''
        this.district = ''
        this.street = ''
      },
      city(newVal) {
        this.district = ''
        this.street = ''
      },
      district(newVal) {
        this.street = ''
      }*/
    },
  }
</script>

<style scoped>

</style>
